<template>
	<view>
		<cu-custom bgColor="bg-grey light" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">登录</view>
		</cu-custom>
		<view class="margin-xl padding-lg bg-white radius shadow shadow-xl">
			<view class="flex-sub">
				<form>
					<view class="cu-form-group">
						<view class="title">学号</view>
						<input maxlength="9" type="number" @input="InputID" :value="userID" placeholder="请输入学号" />
					</view>
					<view class="cu-form-group">
						<view class="title">密码</view>
						<input @input="InputPass" password :value="passWord" placeholder="请输入密码" />
					</view>
					<view class="cu-form-group">
						<view class="title">验证码</view>
						<input :value="captcha" @input="InputCaptcha" placeholder="请输入验证码" />
						<button :style="captchaUrl" @tap="GetCaptchaUrl" class="cu-btn yzm"></button>
					</view>
				</form>
			</view>

			<view class="padding-top-lg margin-top-lg flex flex-direction">
				<button :class="'cu-btn bg-' + (userID && captcha && passWord ? 'black' : 'grey') + '  shadow'"
					role="button" @tap="Login" :aria-disabled="false">登录</button>
				<button v-if="userID !== ''" class="cu-btn line-black shadow margin-top-lg" role="button"
					@tap="DeleteAll" :aria-disabled="false">删除全部信息</button>
			</view>
		</view>

		<view :class="'cu-modal ' + (showMsgAlert ? 'show' : '')">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">错误提示</view>
					<view class="action" @tap="HideMsgAlert">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					{{ errMsg }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import md5 from '../../utils/md5.js'
	export default {
		data() {
			return {
				userID: '',
				passWord: '',
				captcha: '',
				captchaUrl: "background:url('http://211.82.48.36/img/captcha.jpg');background-size: contain",
				showMsgAlert: false,
				errMsg: '',
				CustomBar: app.globalData.CustomBar,
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.setData({
				userID: uni.getStorageSync('userID'),
				passWord: uni.getStorageSync('passWord'),
			});
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			DeleteAll() {
				uni.clearStorage();
				uni.showToast({
					title: '删除成功',

					success() {
						uni.redirectTo({
							url: '/pages/index/index'
						});
					}
				});
			},

			check() {
				if (this.userID == '' || this.passWord == '') {
					this.MsgAlert('请完整输入学号和密码');
					return false;
				}

				if (this.captcha == '') {
					this.MsgAlert('请输入验证码');
					return false;
				}

				return true
			},

			async Login() {
				if (!this.check()) {
					return;
				}
				uni.showLoading()
				let that = this
				var [err, res] = await uni.request({
					url: 'http://211.82.48.36/j_spring_security_check?j_username=' + that.userID +
						'&j_password=' + md5.hex_md5(that.passWord) + '&j_captcha=' + that.captcha,
					method: 'POST',
					header: {
						"Location": "http://211.82.48.36/"
					}
				})
				if (err) {
					that.MsgAlert('网络错误');
				}
				uni.hideLoading()
				this.GetCaptchaUrl()
				if (res.data.indexOf("URP综合教务系统首页") != -1) {
					uni.setStorageSync('userID', that.userID)
					uni.setStorageSync('passWord', that.passWord)
					uni.navigateBack({})
					console.log("登录成功")
				} else {
					uni.hideLoading();
					that.MsgAlert("密码或验证码错误");
					that.setData({
						captcha: ''
					})
				}
			},

			GetCaptchaUrl() {
				this.captchaUrl = "background:url('http://211.82.48.36/img/captcha.jpg?time=" + Math.random() +
					"') 0% 0% / contain"
			},

			MsgAlert(e) {
				this.setData({
					showMsgAlert: true,
					errMsg: e
				});
			},

			HideMsgAlert() {
				this.setData({
					showMsgAlert: false
				});
			},

			InputID(e) {
				this.setData({
					userID: e.detail.value
				});
			},

			InputPass(e) {
				this.setData({
					passWord: e.detail.value
				});
			},

			InputCaptcha(e) {
				this.setData({
					captcha: e.detail.value
				});
			},

		}
	};
</script>
<style>
	@import './index.css';
</style>
